<template>
	<view>
		<view class="content">
			<view class="head">
				<view class="title">
					<text>{{getDetails.title}}</text>
				</view>
				<view class="author-area">
					<view class="author">
						<text>{{getDetails.author}}</text>
					</view>
					<view class="date">
						<text>{{getDetails.createTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="editer">
			<u-parse noData="加载中..." :content="article"></u-parse>
		</view>
		<view class="popular-travels" v-if="recommendTravels.length > 0">
			<view class="popular-travels-title">
				<text>热门推荐</text>
			</view>
			<view class="popular-travels-list-boxs">
				<block v-for="(item,index) in recommendTravels" :key="index">
					<view class="popular-travels-list" @click="goToTravel(item.id,item.type)">
						<view class="popular-travels-list-img">
							<image :src="item.otherImage" style="width: 100%;height: 100%;border-radius: 6px 6px 0px 0px;"></image>
							<view class="discover-travelist-aers">
								<!-- <text class="iconfont icon-location-fill" style="margin-right: 5upx;"></text> -->
								<text>{{item.type}}</text>
							</view>
						</view>

						<view class="popular-travels-list-info">
							<view class="popular-travels-list-text">
								<text>{{item.title}}</text>
							</view>
							<view class="popular-travels-role">
								<!-- <view class="popular-travels-list-headPortrait">
									<image style="width: 100%;height: 100%;border-radius: 50%;" :src="item.headPortrait"></image>
								 </view> -->
								<view>
									<view class="popular-travels-list-author">
										<text>{{item.readCount || '0'}}人浏览</text>
									</view>
									<!-- <view class="popular-travels-list-time">
										 <text>{{item.sendTime}}</text>
									 </view> -->
								</view>
							</view>

						</view>
					</view>
				</block>
			</view>
		</view>
	</view>

</template>


<script>
	import uParse from "@/components/gaoyia-parse/parse.vue"
	export default {
		components: {
			uParse
		},
		data() {
			return {
				recommendTravels: [],
				getDetails: {},
				ids: '',
				pages: '',
				title: '',
				article: ''

			};
		},
		onLoad: function(options) {

			// this.ids = options.id
			this.pages = options.pages
			this.getTraveDetail(options.id)
			if (this.pub.channelType !== '5') {
				this.getNewTravels_discover()
			}

		},
		methods: {
			goToTravel: function(id, type) {
				console.log(type)
				var url = ''
				switch (type) {
					case "景区":
						url = '/pages/scence/scencedetail?id=' + id
						break;
					case "酒店":
						url = '/pages/hotel/hoteldetail?hotelid=' + id
						break;
					case "游记":
						url = '/pages/travelDetail/travelDetail?id=' + id
						break;
					case "餐厅":
						url = '/pages/restaurant/restaurant_detail?id=' + id
						break;
					case "美食":
						url = '/pages/food/foodlist_new?id=' + id
						break;
					case "农家乐":
						url = '/pages/agritainment/agritainmentdateil?id=' + id + '&title=' + '菜品介绍'
						break;
					case '资讯':
						url = '/pages/travelDetail/travelDetail?id=' + id
						break
				}
				uni.navigateTo({
					url: url,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			getNewTravels_discover(attribute) {
				var that = this
				// this.recommendTravels = []
				var param = {
					channelType: '1',
					city: this.citys
				}
				this.$postApi(this.$path.GET_RECOMMEND_LIST, param).then(res => {
					// this.recommendTravels = []

					// this.recommendTravels = res.data.data.list
					let list = res.data.data
					console.log("返回热门推荐列表目的地", res)
					if (res.data.success) {
						list.forEach(item => {
							item.otherImage = this.pub.delLastf(item.otherImage)
							if (item.readCount == null || item.readCount == "null") {
								item.readCount = 0
							}
							switch (item.type) {
								case "1":
									item.type = "景区"
									break;
								case "2":
									item.type = "酒店"
									break;
								case "3":
									item.type = "游记"
									break;
								case "4":
									item.type = "餐厅"
									break;
								case "5":
									item.type = "美食"
									break;
								case "6":
									item.type = "农家乐"
									break;
							}
						})
						this.recommendTravels = list
					}
				})

			},
			getTraveDetail: function(ids) {
				var param = {
					id: ids
				}
				let url = ''
				switch (this.pages) {
					case 'food':
						url = this.$path.GET_NEW_DESTINATION_FOODS
						break;
					case 'news':
						url = this.$path.NEWS_LIST_BY_ID
						break;
					default:
						url = this.$path.GET_NEW_TRAVE_DETAIL
						break;
				}

				this.$postApi(url, param).then(res => {
					console.log("详情返回参数------->",res.data)
					if (res.data.success) {
						// console.log(res.data.data)

						this.getDetails = res.data.data
						this.article = this.getDetails.context
					}
				})
				//#ifdef H5
				document.title = this.title;
				//#endif


			}

		}
	}
</script>

<style lang="scss">
	.popular-travels-role {
		display: flex;
		padding-bottom: 30upx;
	}

	.popular-travels-list-headPortrait {
		width: 36upx;
		height: 36upx;
		margin-right: 8upx;
		// border-radius: 50%;
	}

	.popular-travels-list-text {}

	.popular-travels-list-author {
		margin-bottom: 10upx;
		font-family: PingFang-SC-Medium;
		font-size: 26upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #333333;
		opacity: 0.9;
	}

	.popular-travels-list-time {
		font-family: PingFang-SC-Medium;
		font-size: 20upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #999999;
		opacity: 0.9;
	}

	.popular-travels-title {
		padding: 57upx 0 17upx 24upx;
		font-family: PingFang-SC-Bold;
		font-size: 44upx;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #000000;
	}

	.popular-travels-list {
		width: 48.5%;
		margin-bottom: 24upx;
		background-color: #f3f4f8;
		border-radius: 0px 0px 6px 6px;

	}

	.discover-travelist-aers {
		padding: 5upx 12upx;
		background-color: #353638;
		border-radius: 20upx;
		opacity: 0.8;
		position: absolute;
		bottom: 15upx;
		right: 15upx;
		font-family: PingFang-SC-Bold;
		font-size: 24upx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #ffffff;
	}

	.popular-travels-list-info {
		padding: 20upx 13upx 0 13upx;
	}

	.popular-travels-list-boxs {
		background: #fff;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 18upx 24upx 24upx 24upx;


	}

	.popular-travels-list-img {
		position: relative;
		width: 100%;
		height: 267upx;
	}

	.popular-travels-list-text {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 40upx;
		margin-bottom: 20upx;
		font-family: PingFang-SC-Bold;
		font-size: 32upx;
		font-weight: 600;
		font-stretch: normal;
		letter-spacing: 0upx;
		color: #1a1a1a;
	}

	.content {

		line-height: 60rpx;
		/*padding-left: 26rpx;*/
		/*width: 93%;*/
		/*padding: 20rpx;*/
		/*padding-left: 26rpx;*/
		// padding-top: 170rpx;
		/*padding-right: 30rpx;*/
	}

	.line20 {
		height: 20upx;
		background: #F5F5F5;
	}

	.editer {
		padding: 0 24upx 24upx 24upx;
		line-height: 60rpx;
		font-size: 30upx;
		margin-top: 0 !important;
	}

	.head {
		padding: 30rpx 24upx;

		.title {
			font-size: 50rpx;
			font-weight: bold;
			line-height: 80rpx;
		}
	}

	.author-area {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		/*padding-left: 30rpx;*/
		font-size: 30rpx;
		padding-top: 30rpx;
		color: #bbb;
	}

	.date {
		// margin-left: 30rpx;
	}
</style>
